<template>
    <div class="app-tag">
        <el-tag :class="tagstyle"
           type="info" 
            closable
            v-for="(tag,index) in tags"
            :key="tag.name"
            :disable-transitions="true"
            :effect="$route.path === tag.url ?'dark':'plain'"
            @close="handleClose(tag,index)"
            @click="handleClick(tag)">
            {{tag.title}}
        </el-tag>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'app-tag',
  data () {
      return {
          tagstyle:"tagstyle",
      }
  },

  computed: {
    ...mapState({ tags: 'stateTagsList' })
  },

  methods: {
    ...mapMutations({
      close: 'mutationCloseTag'
    }),
    handleClose (tag, index) {
      if (this.tags.length === 1) { // 如果只有一个标签则不能关闭
        this.$router.push(this.$router.options.routes[0].path)
        this.close(tag) // 删除当前tag
        return
      }
      this.close(tag) // 删除当前tag
      if (this.$route.path !== tag.url) { // 如果关闭的标签不是当前路由的话，不做路由跳转
        return false
      } else {
        if (index === (this.tags.length - 1)) { // 关闭最后一个标签,则路由跳转至最后一个
          this.$router.push(this.tags[index].url)
        } else { // 路由跳转至下一个标签页
          if (index === 0) {
            this.$router.push(this.tags[0].url)
          } else {
            this.$router.push(this.tags[index - 1].url)
          }
        }
      }
    },
    // 点击tags具体标签
    handleClick (tag) {
      this.$router.push(tag.url)
    }
  }
}
</script>

<style lang="less" scoped>
.app-tag{
    .el-tag {
        cursor: pointer;
    }
}
.tagstyle{
  border: 1px solid #2cd3b5;
  color: #2cd3b5;
  margin-left:10px;
}
/deep/.el-tag--dark.el-tag--info{
  background: #2cd3b5;
  color: #ffffff;
}
</style>
